<script setup>
import { onMounted, ref } from 'vue'
import Editor from '@/components/editer/letter/Main.vue'
import { setValue } from '@/utils/editer'
import emitter from '@/utils/event'
import { removeOuterElement } from '../utils/tool'

const editor = ref()
const engine = ref()

onMounted(() => {
  // 页面渲染完了
  engine.value = editor.value ? editor.value.engine : null
  setValue('<p>你好，未来的我………</p>')
  // console.log(engine.value.getHtml())
})

defineExpose({
  getHtmlContent: () => engine.value.getHtml()
})

emitter.on('letter-set-content', (value) => {
  value = removeOuterElement(value)
  setValue(value)
})
</script>

<template>
  <Editor ref="editor" />
</template>

<style lang="less" scoped>
.header {
  padding: 12px;
}
/** 编辑器中标记样式 ---- 开始 **/
[data-mark-preview],
[data-mark-id] {
  position: relative;
}

span[data-mark-preview],
span[data-mark-id] {
  display: inline-block;
}

[data-mark-preview]::before,
[data-mark-id]::before {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0;
  height: 2px;
  border-bottom: 2px solid #f8e1a1 !important;
}

[data-mark-preview] {
  background: rgb(250, 241, 209) !important;
}

[data-card-key][data-mark-id]::before,
[data-card-key][data-mark-preview]::before {
  bottom: -2px;
}
/** 编辑器中标记样式 ---- 结束 **/
</style>
